<template>
    <div>
            <div class="surplus ivu-pt-8">
                <Row :gutter="16">
                    <i-Col span="4">308 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="4">311 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="4">药浴 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="4">中药 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="4">输液 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                </Row>
            </div>
                    <div class="sky-screen ivu-mb-16">
                    <row type="flex" justify="start" >
                        <Col span="4">
                            <DatePicker type="date" placeholder="治疗日期"></DatePicker>
                        </Col>
                        <Col span="4">
                            <Select v-model="formItem.select">
                                <Option value="全部" selected>全部</Option>
                                <Option value="光疗">光疗</Option>
                                <Option value="注射输液">注射输液</Option>
                                <Option value="其它">其它</Option>
                            </Select>
                        </Col>
                    </row>
                </div>
       <Table :columns="columns3" :data="alreadyData" :loading="loading" size="small">
                    <template slot-scope="{ row }" slot="action">
                        <a @click="handleTreatmentDetail"> 详细 </a>
                    </template>
                </Table>
             <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="100" show-elevator show-sizer show-total="" size="small"></Page>
        </div>
        <Modal v-model="oneDetail" title="治疗详细">
            <div class="t-main">
                <p class="time">2019-10-21 11:59</p>
                <Table border :columns="columns1" :data="treatmentData" size="small"></Table>
                <p class="ivu-m-16">
                    本次治疗:
                    <strong>10</strong> 本次剩余:
                    <strong>6</strong>
                </p>
                <p class="ivu-m-16">
                    患者签名:
                    <strong>签名图片</strong>
                </p>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name: 'Treatment',
        data () {
            return {
                oneDetail: false,
                loading: '',
                formItem: {
                    select: ''
                },
                formData: {
                    personnel: [],
                    Occupation: ''
                },
                columns1: [
                    {
                        title: '大部位',
                        key: 'bigPosition'
                    },
                    {
                        title: '细节部位',
                        key: 'detailPosition'
                    },
                    {
                        title: '剂量/时间',
                        key: 'dose'
                    },
                    {
                        title: '数量',
                        key: 'number'
                    }
                ],
                treatmentData: [
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300/mj',
                        number: '5'
                    },
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300/mj',
                        number: '5'
                    }
                ],
                columns3: [
                    {
                        title: '治疗项目',
                        key: 'project'
                    },
                    {
                        title: '治疗数量',
                        key: 'amount'
                    },
                    {
                        title: '治疗时间',
                        key: 'treatmentTime'
                    },
                    {
                        title: '正常剩余',
                        key: 'normal'
                    },
                    {
                        title: '援助剩余',
                        key: 'assistance'
                    },
                    {
                        title: '操作人',
                        key: 'person'
                    },
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        slot: 'action',
                        width: 70
                    }
                ],
                alreadyData: [
                    {
                        project: '308',
                        amount: 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '治疗'
                    },
                    {
                        project: '药浴',
                        amount: 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '新增'
                    },
                    {
                        project: '308',
                        amount: 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '治疗'
                    },
                    {
                        project: '药浴',
                        amount: 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '退费'
                    }
                ]
            }
        },
        methods: {
            handleDetial () {
                this.modal = true;
            },
            handleTreatmentDetail () {
                this.oneDetail = true;
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
.ivu-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.surplus {
    color: #888;
    margin-bottom: 24px;
}
.surplus span {
    margin-left: 4px;
    color: #555;
}
.surplus span b {
        font-weight: bold;
        font-size:14px;
        margin-right:4px;
        color:#19be6b;
    }
.surplus span b.assinstance {
        color:#ff9900;
    }
.t-main p {
    color: #666;
    margin-bottom: 8px;
}
</style>
